<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
    
    <link rel="stylesheet" href="icon-color.css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
    <title>Icon Colors</title>
  </head>
  <body>

    <header class="navbar" role="navigation">
      <div class="container">
        <div class="display-table pull-left" id="navbar-logo-container">
          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
        </div>
        <!-- menu items that get hidden below 768px width -->
        <nav class='collapse navbar-collapse navbar-responsive-collapse'>
          <ul class="nav navbar-nav pull-right">
            <li><a href="../doc">Docs</a></li>
            <li><a class="active" href="index.html">Examples</a></li>
            <li><a href="../apidoc">API</a></li>
            <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="container-fluid">

      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
        <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        This example uses OpenLayers v<span>4.6.5</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
      </div>

      <div class="row-fluid">
        <div class="span12">
          <h4 id="title">Icon Colors</h4>
          <div id="map" class="map"></div>

        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <p id="shortdesc">Example assigning a custom color to an icon</p>
          <div id="docs"><p>Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file. Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the <code>ol.style.Icon</code> must be configured with <code>crossOrigin: &#39;anonymous&#39;</code>.</p>
</div>
          <div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Feature.html" title="API documentation for ol.Feature">ol.Feature</a></li>,<li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.geom.Point.html" title="API documentation for ol.geom.Point">ol.geom.Point</a></li>,<li><a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a></li>,<li><a href="../apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector</a></li>,<li><a href="../apidoc/ol.proj.html" title="API documentation for ol.proj">ol.proj</a></li>,<li><a href="../apidoc/ol.source.TileJSON.html" title="API documentation for ol.source.TileJSON">ol.source.TileJSON</a></li>,<li><a href="../apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector</a></li>,<li><a href="../apidoc/ol.style.Icon.html" title="API documentation for ol.style.Icon">ol.style.Icon</a></li>,<li><a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a></li></ul></div>
        </div>
      </div>

      <div class="row-fluid">
        <div id="source-controls">
          <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
          <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a>
        </div>
        <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
          <textarea class="hidden" name="title">Icon Colors</textarea>
          <textarea class="hidden" name="description">Example assigning a custom color to an icon</textarea>
          <textarea class="hidden" name="js">var rome &#x3D; new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
});

var london &#x3D; new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
});

var madrid &#x3D; new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
});

rome.setStyle(new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    color: &#x27;#8959A8&#x27;,
    crossOrigin: &#x27;anonymous&#x27;,
    src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
  }))
}));

london.setStyle(new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    color: &#x27;#4271AE&#x27;,
    crossOrigin: &#x27;anonymous&#x27;,
    src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
  }))
}));

madrid.setStyle(new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    color: [113, 140, 0],
    crossOrigin: &#x27;anonymous&#x27;,
    src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
  }))
}));


var vectorSource &#x3D; new ol.source.Vector({
  features: [rome, london, madrid]
});

var vectorLayer &#x3D; new ol.layer.Vector({
  source: vectorSource
});

var rasterLayer &#x3D; new ol.layer.Tile({
  source: new ol.source.TileJSON({
    url: &#x27;https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure&#x27;,
    crossOrigin: &#x27;&#x27;
  })
});

var map &#x3D; new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById(&#x27;map&#x27;),
  view: new ol.View({
    center: ol.proj.fromLonLat([2.896372, 44.60240]),
    zoom: 3
  })
});
</textarea>
          <textarea class="hidden" name="css">#map {
  position: relative;
}
</textarea>
          <textarea class="hidden" name="html">&lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
</textarea>
          <input type="hidden" name="resources" value="https://openlayers.org/en/v4.6.5/css/ol.css,https://openlayers.org/en/v4.6.5/build/ol.js">
          <input type="hidden" name="data">
        </form>
        <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Icon Colors&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"&gt;
    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
    &lt;script src="https://openlayers.org/en/v4.6.5/build/ol.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      #map {
        position: relative;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
      var rome &#x3D; new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
      });

      var london &#x3D; new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
      });

      var madrid &#x3D; new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
      });

      rome.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: &#x27;#8959A8&#x27;,
          crossOrigin: &#x27;anonymous&#x27;,
          src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
        }))
      }));

      london.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: &#x27;#4271AE&#x27;,
          crossOrigin: &#x27;anonymous&#x27;,
          src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
        }))
      }));

      madrid.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: [113, 140, 0],
          crossOrigin: &#x27;anonymous&#x27;,
          src: &#x27;https://openlayers.org/en/v4.6.5/examples/data/dot.png&#x27;
        }))
      }));


      var vectorSource &#x3D; new ol.source.Vector({
        features: [rome, london, madrid]
      });

      var vectorLayer &#x3D; new ol.layer.Vector({
        source: vectorSource
      });

      var rasterLayer &#x3D; new ol.layer.Tile({
        source: new ol.source.TileJSON({
          url: &#x27;https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure&#x27;,
          crossOrigin: &#x27;&#x27;
        })
      });

      var map &#x3D; new ol.Map({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById(&#x27;map&#x27;),
        view: new ol.View({
          center: ol.proj.fromLonLat([2.896372, 44.60240]),
          zoom: 3
        })
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
      </div>
    </div>

    <script src="./resources/common.js"></script>
    <script src="./resources/prism/prism.min.js"></script>
    <script src="loader.js?id=icon-color"></script>
  </body>
  <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
    return response.json();
  }).then(function(json) {
    var latestVersion = json.version;
    document.getElementById('latest-version').innerHTML = latestVersion;
    var url = window.location.href;
    var branchSearch = url.match(/\/([^\/]*)\/examples\//);
    var cookieText = 'dismissed=-' + latestVersion + '-';
    var dismissed = document.cookie.indexOf(cookieText) != -1;
    if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.6.5' != latestVersion) {
      var link = url.replace(branchSearch[0], '/latest/examples/');
      fetch(link, {method: 'head'}).then(function(response) {
        var a = document.getElementById('latest-link');
        a.href = response.status == 200 ? link : '../../latest/examples/';
      });
      var latestCheck = document.getElementById('latest-check');
      latestCheck.style.display = '';
      document.getElementById('latest-dismiss').onclick = function() {
        latestCheck.style.display = 'none';
        document.cookie = cookieText;
      }
    }
  });
  </script>
</html>
